<template>
  <div v-if="isShow" class="page">
    <el-row :gutter="24">
      <el-col :span="12">
        <at-card> <EchartBarA /> </at-card>
      </el-col>
      <el-col :span="12">
        <at-card> <EchartBarB /> </at-card>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="12">
        <at-card> <EchartBarC /> </at-card>
      </el-col>
      <el-col :span="12">
        <at-card> <EchartBarD /> </at-card>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="12">
        <at-card> <EchartBarE /> </at-card>
      </el-col>
      <el-col :span="12">
        <at-card> <EchartBarF /></at-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  components: {
    EchartBarA: () => import('./components/EchartBarA'),
    EchartBarB: () => import('./components/EchartBarB'),
    EchartBarC: () => import('./components/EchartBarC'),
    EchartBarD: () => import('./components/EchartBarD'),
    EchartBarE: () => import('./components/EchartBarE'),
    EchartBarF: () => import('./components/EchartBarF')
  },

  data() {
    return {
      isShow: false
    }
  },

  mounted() {
    this.isShow = true
  }
}
</script>

<style lang="scss" scoped>
.page {
  width: 70vw;
  margin: auto;
  margin-top: 20px;
  position: relative;
  &::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: -1;
    filter: blur(2px);
  }
  /deep/.at-card__body {
    height: 450px;
  }
  .el-row {
    margin: 20px;
  }
}
</style>
